<template>
	<!-- 主体内容区域 -->
	<div class="Z_main">
		<!-- 头部区域 -->
		<div class="top">
			<h5>轮播图</h5>
		</div>
		<!-- 底部区域 -->
		<div class="bottom">
			<div class="p">
				<h4>轮播图列表</h4>
				<span class="teacher" @click="jumpAddcarousel()">添加轮播图</span>
			</div>
			<div class="line"></div>
			<!-- 底部表明字段区域 -->
			<ul class="list">
				<li>
					<input type="checkbox">
					<span>名称</span>
					<span>缩略图</span>
					<span>说明</span>
					<span>上传人</span>
					<span>添加时间</span>
					<span>操作</span>
				</li>
				<li v-for="(item, index) in person">
					<input type="checkbox" />
					<span>{{ item.stu_name }}</span>
					<span>{{ item.stu_pict }}</span>
					<span>{{ item.stu_explain }}</span>
					<span>{{ item.stu_link }}</span>
					<span>{{ item.add_tim }}</span>
					<span class="btn">
						<button>编辑</button>
						<button @click="DelUsers(index)">删除</button>
					</span>
				</li>
			</ul>
			<li class="list-bottom">
				<div class="left">
					<input type="checkbox" />
					<span>全选</span>
				</div>
				<div class="right">
					<span class="num">共400条</span>
					<span class="pages">100条/页</span>
					<div class="page">
						<span>&lt;</span>
						<span>1</span>
						<span>2</span>
						<span>3</span>
						<span>4</span>
						<span>&gt;</span>
					</div>
					<div class="goto">
						<span>前往</span>
						<span class="arc">4</span>
						<span>页</span>
					</div>
				</div>
			</li>
		</div>
	</div>
</template>

<script>
import {
	ref
} from 'vue'
import { infCarousel, delInfCarousel } from '../api/api.js'
export default {
	setup() {
		const value = ref('');
		// 空数组存放数据
		const person = ref([]);
		// 存放删除，修改的索引
		const _index = ref(0);
		const searchTest = ref('');

		// 存放字段名的数组
		const Newperson = ref({
			stu_name: '',
			stu_pict: '',
			stu_explain: '',
			stu_link: '',
			add_tim: '',
			ifFlg: true
		})
		return {
			value,
			person,
			_index,
			searchTest,
			Newperson
		}
	},
	mounted() {
		this.AllUsers();
	},
	methods: {
		jumpAddcarousel() {
			this.$router.push('/addcarousel')
		},
		// 获取全部
		AllUsers() {
			infCarousel()
				.then(res => {
					// this.person = res.data.list;
					console.log(res)
					const _data = res.data.list;
					this.person = _data;
					console.log(this.person);
				})
				.catch(err => {
					console.log(err);
				})
		},
		// 删除
		DelUsers(index) {
			console.log(index)
			const serNum = this.person[index].stu_name;
			const data = { serNum }
			console.log(data)
			delInfCarousel(data)
				.then(res => {
					console.log(res)
					this.AllUsers();
				})
				.catch(err => {
					console.log(err)
				})
		}
	}
}
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.Z_main {
	width: calc(100% - 60px);
	background-color: #f0f0f0;
	padding: 35px 30px;
}

.top {
	margin-bottom: 30px;
}

.bottom {
	width: calc(100% - 60px);
	padding: 30px;
	background-color: #fff;
}

.bottom {
	height: 600px;
}

.bottom>.p {
	width: 100%;
	height: 40px;
	line-height: 20px;
}

.bottom>.p>h4 {
	float: left;
}

.line {
	width: 100%;
	height: 25px;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
}

.list {
	width: 100%;
	height: 503px;
}

.list>li {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 50px;
	font-weight: bold;
	border-bottom: 1px solid #f0f0f0;
}

.list>li>input {
	flex: 1;
}

.list>li>span {
	flex: 1;
	text-align: center;
}

.list>li:nth-child(1) {
	height: 43px;
}

.list>li>input {
	width: 18px;
	height: 18px;
}

.select {
	width: 120px !important;
}

.ipt {
	width: 220px;
	height: 28px;
	padding: 0 18px;
	border-radius: 8px;
	outline: none;
	border: 2px solid #dcdfe6;
}

.icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 76px;
	height: 32px;
	background-color: #38a28a;
	border-radius: 5px;
}

.icon-p {
	color: #fff;
	font-size: 12px;
}

.img {
	width: 20px;
	height: 20px;
}

.img>img {
	width: 100%;
	height: 100%;
}

.teacher {
	float: right;
	width: 90px;
	height: 32px;
	background-color: #38a28a;
	line-height: 32px;
	text-align: center;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
}
.btn {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.btn>button {
	outline: noen;
	width: 50px;
	height: 30px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	background-color: #fff;
}

.btn>button:nth-child(1) {
	color: #38a28a;
	text-align: right;
}

.btn>button:nth-child(2) {
	color: red;
	text-align: left;
}
.list-bottom {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.list-bottom>input {
	float: left;
}
.list-bottom>.left{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.list-bottom>.left>span{
	margin-left: 18px;
}
.left>input{
	width: 18px;
	height: 18px;
}
.list-bottom>.right{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.page{
	width: 215px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
.goto{
	width: 128px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.goto>span:nth-child(1){
	margin-right: 15px;
}
.goto>span:nth-child(3){
	margin-left: 15px;
}
.arc{
	width: 48px;
	height: 26px;
	border: 1px solid #8e8e8e;
	border-radius: 4px;
	text-align: center;
	line-height: 26px;
}
.num{
	margin-right: 15px;
}
</style>
